<template>
    <header :class="{'special': special}">
        <div class="container">
            <div class="logo">
                <a href="/">
                    <div class="iconfont icon-swellpro"></div>
                </a>
            </div>

            <!-- menu菜单栏 -->
            <div class="menu">
                <div class="menu-item" v-for="(item, index) in menu" :key="index">
                    <!-- 一级菜单 -->
                    <a :href="item.link !== '' ? item.link : 'javascript:volid(0)'">{{item.title}}</a>

                    <!-- 二级菜单 -->
                    <div class="menu-item-detail" v-if="item.children">
                        <div class="container">
                            <a :class="index == 0 ? 'row' : 'row-single'" :href="child.link" v-for="(child, childIndex) in item.children" :key="'child' + childIndex">
                                <p :class="['title', {'first': childIndex == 0 && index !== 0}]">{{child.title}}</p>
                                <p v-if="child.description">{{child.description}}</p>
                                <img :src="child.img" :alt="child.alt" v-if="child.img" style="width: 105%">
                            </a>
                        </div>
                    </div>
                </div>
                <div class="menu-item">
                    <button>
                        <a href="https://store.swellpro.com">Store</a>
                    </button>   
                </div>
            </div>
        </div>
    </header>
</template>

<script>
export default {
    data() {
        return {
            menu:[
                {
                    title: 'Waterproof Drones',
                    link: '',
                    children: [
                        {
                            title: 'SplashDrone 3+',
                            description: 'A multifunctional waterproof drone platform',
                            img: 'https://cdn.swellpro.com/index/threePlus.jpg',
                            link: '/waterproof-splash-drone.html',
                            alt: 'SplashDrone 3+'
                        },
                        {
                            title: 'Spry',
                            description: 'The portable waterproof sport drone',
                            img: 'https://cdn.swellpro.com/index/spryDrone.jpg',
                            link: '/spry.html',
                            alt: 'Spry'
                        }
                    ]
                },
                {
                    title: 'Components',
                    link: '',
                },
                {
                    title: 'Support',
                    link: '',
                    children: [
                        {
                            title: 'Aftersales Service',
                            link: '/service.html'
                        },
                        {
                            title: 'Download',
                            link: '/download.html'
                        },
                        {
                            title: 'Tutorial Video',
                            link: '/video.html'
                        },
                    ]
                },
                {
                    title: 'Contact',
                    link: '/contact.html',
                },
            ]
        }
    },

    props: {
        special: {
            default: false,
            type: Boolean
        }
    },

    computed: {},

    mounted() {},

    methods: {}
}
</script>
<style lang='stylus'>
$backColor = #1f2024 
$fontColor = #fff
$activeFontColor = #000
$hoverFontColor = #919699
$themeColor = #f26444
header
    background $backColor
    width 100%
    height 60px
    position relative
    transition all .6s ease
    box-sizing border-box
    .container
        display flex
        color $fontColor
        .logo
            flex 1
            height 60px
            a
                padding-top 15px
                display block
        .menu
            display flex
            flex 5
            &-item
                display flex
                flex 1
                justify-content center
                align-items center
                cursor pointer
                box-sizing border-box
                a
                    display block
                button
                    background $themeColor
                    padding 6px 12px
                    border none
                    border-radius 3px
                    font-size 14px
                    cursor pointer
                    a
                        color #fff!important
                        font-weight 300
                &-detail
                    position absolute
                    top 60px
                    left 0
                    width 100%
                    background #fff
                    max-height 0px
                    transition all .3s ease
                    z-index 2
                    overflow hidden
                    .container
                        display flex
                        .row
                            flex 0 0 20%
                            box-sizing border-box 
                            padding 30px 40px 0 30px
                            display block
                            cursor pointer
                            p
                                color #303233
                                font-weight 300
                                font-size 14px
                            .title
                                line-height 14px
                                margin-bottom 8px
                                font-size 17px
                                font-weight 400
                            img
                                display block
                                width 95%
                                padding 10px 0
                                transition all .3s
                            &:hover
                                img
                                    transform scale(1.1)
                            &:last-child
                                padding-right 0px
                        a
                            opacity 0
                            transform translate3d(25px,0,0)
                            transition transform .3s ease, opacity .3s ease
                        .row-single
                            line-height 60px
                            margin-right 40px
                            color $hoverFontColor
                            cursor pointer
                            &:hover
                                color $themeColor
                    .first
                        margin-left: 480px
                &:hover
                    border-bottom 1px solid rgba(0,0,0,1)
                    .menu-item-detail
                        max-height 1000px
                    a
                        color $activeFontColor
                    .menu-item-detail
                        .container
                            a
                                opacity 1
                                transform translateZ(0)
                                for index in 1 2 3 4 5
                                    &:nth-child({index})
                                        transition-delay index * 0.2s
        a
            color $fontColor
            font-weight 300
    .iconfont
        color $fontColor
        width 121px
        height 31px
        font-size 27px
        font-weight 300
    &:hover
        background $fontColor
        border-bottom 1px solid rgba(0, 0, 0, .2)
        .iconfont
            color $backColor
        .container
            color $activeFontColor
            a
                color $hoverFontColor
.special
    background none
    z-index 10
    position absolute
</style>